<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
  <script src="/node_modules/jquery/dist/jquery.min.js"></script>
  <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</head>

<body>
  <!-- 引入公共导航顶部 -->
  <%- include('./layout/header.ejs')%>

  <h1>文章列表</h1>
  <!-- 文章列表 -->
  <ul class="list-group">
    <% list.forEach(item => { %>
    <li class="list-group-item">
      <span class="badge" style="background-color:#5bc0de;">
        <strong>发表时间：</strong>
        <%= item.ctime %>
      </span>
      <span class="badge" style="background-color:#f0ad4e;">
        <strong>作者昵称：</strong>
        <%= item.nickname %>
      </span>
      <a href="/article/detail?id=<%= item.id %>">
        <%= item.title %>
      </a>
    </li>
    <% }) %>
  </ul>

  <!-- 分页 -->
  <nav aria-label="Page navigation">
      <ul class="pagination">
        <li>
          <a href="/?page=<%= nowPage === 1 ? 1 : nowPage-1 %>" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
        </li>
        <% for(var i=0; i < totalPage; i++){ %>
          <li class="<%= nowPage === (i+1) ? 'active' : '' %>"><a href="/?page=<%= i+1 %>"><%= i+1 %></a></li>
        <% } %>
        <li>
          <a href="/?page=<%= nowPage === totalPage? totalPage : nowPage+1 %>" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
        </li>
      </ul>
    </nav>

  <!-- 引入公共底部 -->
  <%- include('./layout/footer.ejs')%>
</body>
</html>